<template>
  <div>
    <el-row :span="24" type="flex">
      <el-col :span="5"><h3>项目计划</h3></el-col>
    </el-row>
    <el-divider style="margin: 10px"></el-divider>
    <el-form :model="initForm" label-width="100px" size="small">
<!--      <el-form-item label="执行计划">-->
<!--        <el-radio-group v-model="reverse">
          <el-radio :label="true">倒序</el-radio>
          <el-radio :label="false">正序</el-radio>
        </el-radio-group>-->
      <el-form-item>
        <el-timeline style="margin-left: 0; padding-left:0; margin-top:20px;">
          <el-timeline-item :timestamp="2023/11/12"
                            placement="top" :color="color">
            <el-card
                style="border-left: 4px solid pink; width: 100%;">
              <el-descriptions class="margin-top" :column="3" title="工艺" border>
                <template slot="extra" style="display: flex; justify-content: space-between; align-items: center; width: 500px">
                  <el-statistic
                      ref="statistic"
                      @finish="hilarity"
                      format="HH:mm:ss"
                      :value="deadline4"
                      time-indices style="width: 200px; font-size: 15px">
                    <template slot="suffix">
                      后到期
                    </template>
                  </el-statistic>
                    <el-progress :percentage="50"style="font-size: 15px;width: 200px">当前进度</el-progress>
                </template>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-tickets"></i>
                    开始时间
                  </template>
                  <el-input disabled="true"></el-input>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-tickets"></i>
                    截止日期
                  </template>
                  <el-input disabled="true"></el-input>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-tickets"></i>
                    时长
                  </template>
                  <el-input disabled="true"></el-input>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-user"></i>
                    负责人
                  </template>
                  <el-input disabled="true"></el-input>
                </el-descriptions-item>
                <el-descriptions-item span="2">
                  <template slot="label">
                    <i class="el-icon-user"></i>
                    协作人
                  </template>
                  <el-input disabled="true"></el-input>
                </el-descriptions-item>
                <el-descriptions-item span="3">
                  <template slot="label">
                    <i class="el-icon-office-building"></i>
                    工作内容
                  </template>
                  <el-input disabled="true"></el-input>
                </el-descriptions-item>
                <el-descriptions-item span="3">
                  <template slot="label">
                    <i class="el-icon-s-promotion"></i>
                    附件
                  </template>
                  <el-input disabled="true"></el-input>
                </el-descriptions-item>
                <el-descriptions-item span="3">
                  <template slot="label">
                    <i class="el-icon-office-building"></i>
                    子任务
                  </template>
                  <el-descriptions class="margin-top" v-if="techPlanVisible" :column="3" border size="small"
                                   style="margin-bottom: 20px">
                    <el-descriptions-item v-for="(item, index) in techSubTasks" :key="index" span="3">
                      <template slot="label">
                        <i class="el-icon-office-building"></i>
                        子任务{{ index + 1 }}
                      </template>
                      <el-descriptions class="margin-top" :column="4" border size="mini"
                                       style="width: 100%;">
                        <el-descriptions-item>
                          <template slot="label">
                            <i class="el-icon-office-building"></i>
                            任务名称
                          </template>
                          <el-input></el-input>
                        </el-descriptions-item>
                        <el-descriptions-item>
                          <template slot="label">
                            <i class="el-icon-office-building"></i>
                            完成时间
                          </template>
                          <el-input></el-input>
                        </el-descriptions-item>
                        <el-descriptions-item>
                          <template slot="label">
                            <i class="el-icon-office-building"></i>
                            负责人
                          </template>
                          <el-input></el-input>
                        </el-descriptions-item>
                        <el-descriptions-item>
                          <template slot="label">
                            <i class="el-icon-office-building"></i>
                            协作人
                          </template>
                          <el-input></el-input>
                        </el-descriptions-item>
                        <el-descriptions-item>
                          <template slot="label">
                            <i class="el-icon-office-building"></i>
                            附件
                          </template>
                          <el-button type="text" size="small"></el-button>
                        </el-descriptions-item>
                        <el-descriptions-item>
                          <template slot="label">
                            <i class="el-icon-office-building"></i>
                            工作内容
                          </template>
                          <el-input></el-input>
                        </el-descriptions-item>
<!--                        <el-descriptions-item>
                          <template slot="label">
                            <el-button type="text" size="small" @click="deleteSubTask(index)">删除</el-button>
                          </template>
                        </el-descriptions-item>-->
                      </el-descriptions>
                    </el-descriptions-item>

                  </el-descriptions>
<!--                  <el-button @click="addTechSubTask()" type="text" size="small">添加工艺子任务</el-button>-->
                </el-descriptions-item>
              </el-descriptions>
            </el-card>
          </el-timeline-item>
          <el-timeline-item :timestamp="2023/11/13"
                            placement="top" :color="color">
            <el-card
                style="border-left: 4px solid pink; width: 100%;">
              <el-descriptions class="margin-top" :column="3" title="设计" border>
                <template slot="extra">
                  <el-statistic
                      ref="statistic"
                      @finish="hilarity"
                      format="HH:mm:ss"
                      :value="deadline4"
                      time-indices>
                    <template slot="suffix">
                      后到期
                    </template>
                  </el-statistic>
                </template>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-tickets"></i>
                    开始时间
                  </template>
                  <el-input disabled="true"></el-input>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-tickets"></i>
                    截止日期
                  </template>
                  <el-input disabled="true"></el-input>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-tickets"></i>
                    时长
                  </template>
                  <el-input disabled="true"></el-input>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-user"></i>
                    负责人
                  </template>
                  <el-input disabled="true"></el-input>
                </el-descriptions-item>
                <el-descriptions-item span="2">
                  <template slot="label">
                    <i class="el-icon-user"></i>
                    协作人
                  </template>
                  <el-input disabled="true"></el-input>
                </el-descriptions-item>
                <el-descriptions-item span="3">
                  <template slot="label">
                    <i class="el-icon-office-building"></i>
                    工作内容
                  </template>
                  <el-input disabled="true"></el-input>
                </el-descriptions-item>
                <el-descriptions-item span="3">
                  <template slot="label">
                    <i class="el-icon-s-promotion"></i>
                    附件
                  </template>
                  <el-input disabled="true"></el-input>
                </el-descriptions-item>
                <el-descriptions-item span="3">
                  <template slot="label">
                    <i class="el-icon-office-building"></i>
                    子任务
                  </template>
                  <el-descriptions class="margin-top" v-if="designPlanVisible" :column="3" border size="small"
                                   style="margin-bottom: 20px">
                    <el-descriptions-item v-for="(item, index) in designSubTasks" :key="index" span="3">
                      <template slot="label">
                        <i class="el-icon-office-building"></i>
                        子任务{{ index + 1 }}
                      </template>
                      <el-descriptions class="margin-top" :column="4" border size="mini"
                                       style="width: 100%;">
                        <el-descriptions-item>
                          <template slot="label">
                            <i class="el-icon-office-building"></i>
                            任务名称
                          </template>
                          <el-input></el-input>
                        </el-descriptions-item>
                        <el-descriptions-item>
                          <template slot="label">
                            <i class="el-icon-office-building"></i>
                            完成时间
                          </template>
                          <el-input></el-input>
                        </el-descriptions-item>
                        <el-descriptions-item>
                          <template slot="label">
                            <i class="el-icon-office-building"></i>
                            负责人
                          </template>
                          <el-input></el-input>
                        </el-descriptions-item>
                        <el-descriptions-item>
                          <template slot="label">
                            <i class="el-icon-office-building"></i>
                            协作人
                          </template>
                          <el-input></el-input>
                        </el-descriptions-item>
                        <el-descriptions-item>
                          <template slot="label">
                            <i class="el-icon-office-building"></i>
                            附件
                          </template>
                          <el-button type="text" size="small">点击上传</el-button>
                        </el-descriptions-item>
                        <el-descriptions-item>
                          <template slot="label">
                            <i class="el-icon-office-building"></i>
                            工作内容
                          </template>
                          <el-input></el-input>
                        </el-descriptions-item>
                        <el-descriptions-item>
                          <template slot="label">
                            <el-button type="text" size="small" @click="deleteDesignSubTask(index)">删除</el-button>
                          </template>
                        </el-descriptions-item>
                      </el-descriptions>
                    </el-descriptions-item>

                  </el-descriptions>
<!--                  <el-button @click="addDesignSubTask()" type="text" size="small">添加设计子任务</el-button>-->
                </el-descriptions-item>
              </el-descriptions>
            </el-card>
          </el-timeline-item>
          <el-timeline-item :timestamp="2023/11/13"
                            placement="top" :color="color">
            <el-card
                style="border-left: 4px solid pink; width: 100%;">
              <el-descriptions class="margin-top" :column="3" title="制造" border>
                <template slot="extra">
                  <el-statistic
                      ref="statistic"
                      @finish="hilarity"
                      format="HH:mm:ss"
                      :value="deadline4"
                      time-indices>
                    <template slot="suffix">
                      后到期
                    </template>
                  </el-statistic>
                </template>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-tickets"></i>
                    开始时间
                  </template>
                  <el-input disabled="true"></el-input>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-tickets"></i>
                    截止日期
                  </template>
                  <el-input disabled="true"></el-input>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-tickets"></i>
                    时长
                  </template>
                  <el-input disabled="true"></el-input>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-user"></i>
                    负责人
                  </template>
                  <el-input disabled="true"></el-input>
                </el-descriptions-item>
                <el-descriptions-item span="2">
                  <template slot="label">
                    <i class="el-icon-user"></i>
                    协作人
                  </template>
                  <el-input disabled="true"></el-input>
                </el-descriptions-item>
                <el-descriptions-item span="3">
                  <template slot="label">
                    <i class="el-icon-office-building"></i>
                    工作内容
                  </template>
                  <el-input disabled="true"></el-input>
                </el-descriptions-item>
                <el-descriptions-item span="3">
                  <template slot="label">
                    <i class="el-icon-s-promotion"></i>
                    附件
                  </template>
                  <el-input disabled="true"></el-input>
                </el-descriptions-item>
                <el-descriptions-item span="3">
                  <template slot="label">
                    <i class="el-icon-office-building"></i>
                    子任务
                  </template>
                  <el-descriptions class="margin-top" v-if="manuPlanVisible" :column="3" border size="small"
                                   style="margin-bottom: 20px">
                    <el-descriptions-item v-for="(item, index) in manuSubTasks" :key="index" span="3">
                      <template slot="label">
                        <i class="el-icon-office-building"></i>
                        子任务{{ index + 1 }}
                      </template>
                      <el-descriptions class="margin-top" :column="4" border size="mini"
                                       style="width: 100%;">
                        <el-descriptions-item>
                          <template slot="label">
                            <i class="el-icon-office-building"></i>
                            任务名称
                          </template>
                          <el-input></el-input>
                        </el-descriptions-item>
                        <el-descriptions-item>
                          <template slot="label">
                            <i class="el-icon-office-building"></i>
                            完成时间
                          </template>
                          <el-input></el-input>
                        </el-descriptions-item>
                        <el-descriptions-item>
                          <template slot="label">
                            <i class="el-icon-office-building"></i>
                            负责人
                          </template>
                          <el-input></el-input>
                        </el-descriptions-item>
                        <el-descriptions-item>
                          <template slot="label">
                            <i class="el-icon-office-building"></i>
                            协作人
                          </template>
                          <el-input></el-input>
                        </el-descriptions-item>
                        <el-descriptions-item>
                          <template slot="label">
                            <i class="el-icon-office-building"></i>
                            附件
                          </template>
                          <el-button type="text" size="small">点击上传</el-button>
                        </el-descriptions-item>
                        <el-descriptions-item>
                          <template slot="label">
                            <i class="el-icon-office-building"></i>
                            工作内容
                          </template>
                          <el-input></el-input>
                        </el-descriptions-item>
                        <el-descriptions-item>
                          <template slot="label">
                            <el-button type="text" size="small" @click="deleteManuSubTask(index)">删除</el-button>
                          </template>
                        </el-descriptions-item>
                      </el-descriptions>
                    </el-descriptions-item>

                  </el-descriptions>
                  <el-button @click="addManuSubTask()" type="text" size="small">添加制造子任务</el-button>
                </el-descriptions-item>
              </el-descriptions>
            </el-card>
          </el-timeline-item>
          <el-timeline-item :timestamp="2023/11/13"
                            placement="top" :color="color">
            <el-card
                style="border-left: 4px solid pink; width: 100%;">
              <el-descriptions class="margin-top" :column="3" title="交付" border>
                <template slot="extra">
                  <el-statistic
                      ref="statistic"
                      @finish="hilarity"
                      format="HH:mm:ss"
                      :value="deadline4"
                      time-indices>
                    <template slot="suffix">
                      后到期
                    </template>
                  </el-statistic>
                </template>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-tickets"></i>
                    开始时间
                  </template>
                  <el-input disabled="true"></el-input>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-tickets"></i>
                    截止日期
                  </template>
                  <el-input disabled="true"></el-input>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-tickets"></i>
                    时长
                  </template>
                  <el-input disabled="true"></el-input>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-user"></i>
                    负责人
                  </template>
                  <el-input disabled="true"></el-input>
                </el-descriptions-item>
                <el-descriptions-item span="2">
                  <template slot="label">
                    <i class="el-icon-user"></i>
                    协作人
                  </template>
                  <el-input disabled="true"></el-input>
                </el-descriptions-item>
                <el-descriptions-item span="3">
                  <template slot="label">
                    <i class="el-icon-office-building"></i>
                    工作内容
                  </template>
                  <el-input disabled="true"></el-input>
                </el-descriptions-item>
                <el-descriptions-item span="3">
                  <template slot="label">
                    <i class="el-icon-s-promotion"></i>
                    附件
                  </template>
                  <el-input disabled="true"></el-input>
                </el-descriptions-item>
                <el-descriptions-item span="3">
                  <template slot="label">
                    <i class="el-icon-office-building"></i>
                    子任务
                  </template>
                  <el-descriptions class="margin-top" v-if="deliverPlanVisible" :column="3" border size="small"
                                   style="margin-bottom: 20px">
                    <el-descriptions-item v-for="(item, index) in deliverSubTasks" :key="index" span="3">
                      <template slot="label">
                        <i class="el-icon-office-building"></i>
                        子任务{{ index + 1 }}
                      </template>
                      <el-descriptions class="margin-top" :column="4" border size="mini"
                                       style="width: 100%;">
                        <el-descriptions-item>
                          <template slot="label">
                            <i class="el-icon-office-building"></i>
                            任务名称
                          </template>
                          <el-input></el-input>
                        </el-descriptions-item>
                        <el-descriptions-item>
                          <template slot="label">
                            <i class="el-icon-office-building"></i>
                            完成时间
                          </template>
                          <el-input></el-input>
                        </el-descriptions-item>
                        <el-descriptions-item>
                          <template slot="label">
                            <i class="el-icon-office-building"></i>
                            负责人
                          </template>
                          <el-input></el-input>
                        </el-descriptions-item>
                        <el-descriptions-item>
                          <template slot="label">
                            <i class="el-icon-office-building"></i>
                            协作人
                          </template>
                          <el-input></el-input>
                        </el-descriptions-item>
                        <el-descriptions-item>
                          <template slot="label">
                            <i class="el-icon-office-building"></i>
                            附件
                          </template>
                          <el-button type="text" size="small">点击上传</el-button>
                        </el-descriptions-item>
                        <el-descriptions-item>
                          <template slot="label">
                            <i class="el-icon-office-building"></i>
                            工作内容
                          </template>
                          <el-input></el-input>
                        </el-descriptions-item>
                        <el-descriptions-item>
                          <template slot="label">
                            <el-button type="text" size="small" @click="deleteDeliverSubTask(index)">删除</el-button>
                          </template>
                        </el-descriptions-item>
                      </el-descriptions>
                    </el-descriptions-item>

                  </el-descriptions>
                  <el-button @click="addDeliverSubTask()" type="text" size="small">添加交付子任务</el-button>
                </el-descriptions-item>
              </el-descriptions>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </el-form-item>
      <el-form-item>
        <el-button @click="submit()" type="success">提交审批</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "NodePlan",
  data() {
    return {
      color: 'deeppink',
      deadline4: Date.now() + (new Date().setHours(23, 59, 59) - Date.now()),
      techPlanVisible: true,
      designPlanVisible: false,
      manuPlanVisible: false,
      deliverPlanVisible: false,
      techSubTasks: [],
      designSubTasks: [],
      manuSubTasks: [],
      deliverSubTasks: [],
      fileList: [],
    }
  },
  methods: {
    hilarity() {
      this.$notify({
        title: "提示",
        message: "时间已到",
        duration: 0,
      });
    },

    addTechSubTask() {
      this.techPlanVisible = true
      this.techSubTasks.push({content: ""});
    },
    deleteTechSubTask(index) {
      // 从数据源中移除相应的子任务
      this.techSubTasks.splice(index, 1);
    },

    addDesignSubTask() {
      this.designPlanVisible = true
      this.designSubTasks.push({content: ""});
    },
    deleteDesignSubTask(index) {
      // 从数据源中移除相应的子任务
      this.designSubTasks.splice(index, 1);
    },

    addManuSubTask() {
      this.manuPlanVisible = true
      this.manuSubTasks.push({content: ""});
    },
    deleteManuSubTask(index) {
      // 从数据源中移除相应的子任务
      this.manuSubTasks.splice(index, 1);
    },

    addDeliverSubTask() {
      this.deliverPlanVisible = true
      this.deliverSubTasks.push({content: ""});
    },
    deleteDeliverSubTask(index) {
      // 从数据源中移除相应的子任务
      this.deliverSubTasks.splice(index, 1);
    }

  }
}
</script>

<style scoped>

</style>